<template>
  <Headers page="search" />
  <div class="content">
    <el-card style="margin: 10px; display: flex; flex-direction: column">
      <el-date-picker
        style="width: 130px; margin-right: 5px"
        v-model="daterange"
        type="date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="changeDate"
        placeholder="请选择日期"
        size="large"
      />
      <el-select
        v-model="lineid"
        placeholder="请选择线路"
        size="large"
        style="width: 130px; margin-right: 5px"
        @change="selectLine"
      >
        <el-option
          label="山咀-上川"
          :value="1"
          v-if="userStore.querywharf.indexOf('1') !== -1"
        />
        <el-option
          label="山咀-下川"
          :value="2"
          v-if="userStore.querywharf.indexOf('1') !== -1"
        />
        <el-option
          label="上川-山咀"
          :value="3"
          v-if="userStore.querywharf.indexOf('2') !== -1"
        />
        <el-option
          label="下川-山咀"
          :value="4"
          v-if="userStore.querywharf.indexOf('3') !== -1"
        />
      </el-select>

      <el-select
        v-model="flightid"
        placeholder="请选择航班"
        size="large"
        style="width: 130px; margin-right: 5px"
        @change="selectFlight"
      >
      <template  v-for="flight in flights" :key="flight.id">
        <el-option
          v-if="flight.stock && flight.stock>=-1"
          :label="flight.title"
          :value="flight.id"
          
        />
      </template>
      </el-select>
      <el-input v-if="userStore.scene_only_search==1" size="large" v-model="keyword" placeholder="请输入关建字"  style="margin:5px 5px 0 0;width:265px"/>
      <el-button  type="primary" @click="search"> 查询 </el-button>
      <el-button  type="primary" @click="excel"> 导出 </el-button>
    </el-card>
    <el-card v-for="item in orders" :key="item.id" style="margin: 10px">
      <el-row>
        <el-col :span="12">线路：{{ item.suit[0].productname }}</el-col>
        <el-col :span="12">车型：{{ item.suit[0].suit_name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="14"
          >航班：{{ item.suit[0].usedate }}({{ item.suit[0].flight }})</el-col
        >
        <el-col :span="10" v-if="item.suit[0].drivernum == '1'"
          ><div style="color: red">含跟车司机</div></el-col
        >
      </el-row>

      <el-row>
        <el-col :span="12">姓名：{{ item.suit[0].linkman }}</el-col>
        <el-col :span="12">电话：{{ item.suit[0].linktel }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">证件：{{ item.suit[0].linkidcard }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">长度：{{ item.suit[0].car[0].size }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12">车型：{{ item.suit[0].car[0].cartype }}</el-col>
        <el-col :span="12">车牌：{{ item.suit[0].car[0].carnumber }}</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import Headers from "@/components/Header.vue";
import { onMounted, ref, reactive, onUnmounted } from "vue";
import { useUser } from "@/stores/user";
import request from "@/utils/request";
import VueQrcode from "vue-qrcode";
import { Camera } from "@element-plus/icons-vue";
import { getcar, creatWS, getUploadData, closeCap } from "@/utils/gpy";
import { ElMessageBox } from "element-plus";
import axios from "axios";
onMounted(() => {
  setTimeout(()=>{
    creatWS();  
    },500)
});
onUnmounted(() => {
  closeCap();
});
const userStore = useUser();
const ws = ref(null);
const keyword = ref("");
const daterange = ref([]);
const lineid = ref("");
const flightid = ref("");
const orders = ref([]);
const usedate = ref("");
const flights = ref([]);
const changeDate = (e) => {
  usedate.value = e;
  lineid.value = "";
  flightid.value = "";
};
const selectLine = async (e) => {
  let params = {
    url: "/scene/ferry/get_flight",
    method: "POST",
    data: {
      id: e,
      usedate: usedate.value,
    },
  };
  let res = await request(params);
  if (res.status) {
    flights.value = res.data;
    flightid.value = "";
  }
};
const selectFlight = (e) => {};

const search = async () => {
  orders.value = [];
  let params = {
    url: "/scene/order/onlysearch",
    method: "POST",
    data: {
      usedate: usedate.value,
      ferryid: lineid.value,
      flightid: flightid.value,
      keyword:keyword.value
    },
  };
  let res = await request(params);
  if (res.status) {
    if (res.data.total > 0) {
      orders.value = res.data.list;
    } else {
      ElMessageBox.alert("订单不存在");
    }
  }
};

const excel = () => {  
  axios.post(
      "/scene/order/excel",
      {
        usedate: usedate.value,
        ferryid: lineid.value,
        flightid: flightid.value,
        client_id: 1,
        token: userStore.token,
        keyword:keyword.value
      },
      {
        baseURL: "https://www.chuandaolundu.com/api/v2",
        responseType: "blob",
      }
    )
    .then((res) => {
      const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
      const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
      const a = document.createElement("a"); //创建a标签
      a.style.display = "none";
      a.href = href; // 指定下载链接
      a.download = "订单"; //指定下载文件名
      a.click(); //触发下载
      URL.revokeObjectURL(a.href); //释放URL对象
    });
};
</script>

<style scoped>
.content {
  margin: 20px auto;
  max-width: 600px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
#printContent {
  display: none;
}
.mpt10 {
  margin-top: 10px;
}
.mpb10 {
  margin-bottom: 10px;
}
@media print {
  @page {
    size: auto; /* auto is the initial value */
    margin: 0 0;
  }

  #printContent {
    display: flex;
  }
  .box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .printBox {
    width: 95%;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    transform: rotate(180deg);
    font-size: 12px;
    position: relative;
  }
  .printBox div {
    line-height: 20px;
  }
  .qrcode {
    position: absolute;
    margin: 20px 0 0 0px;
    text-align: center;
    right: 0px;
  }
}
.el-row {
  height: 26px;
}
</style>